import Sprite from '../base/sprite';
import { SCREEN_WIDTH, SCREEN_HEIGHT } from '../render';

const BG_IMG_SRC = 'images/bg.jpg';
const BG_WIDTH = SCREEN_WIDTH;
const BG_HEIGHT = SCREEN_HEIGHT;

/**
 * 游戏背景类
 * 提供 update 和 render 函数实现无限滚动的背景功能
 */
export default class BackGround extends Sprite {
  constructor() {
    super(BG_IMG_SRC, BG_WIDTH, BG_HEIGHT);
    
    // 在图片加载完成后设置正确的渲染尺寸
    this.img.onload = () => {
      // 计算图片的原始宽高比
      const imageRatio = this.img.width / this.img.height;
      // 计算屏幕的宽高比
      const screenRatio = SCREEN_WIDTH / SCREEN_HEIGHT;
      
      if (screenRatio > imageRatio) {
        // 如果屏幕更宽，以屏幕宽度为基准
        this.renderWidth = SCREEN_WIDTH;
        this.renderHeight = SCREEN_WIDTH / imageRatio;
        this.renderX = 0;
        this.renderY = (SCREEN_HEIGHT - this.renderHeight) / 2;
      } else {
        // 如果屏幕更高，以屏幕高度为基准
        this.renderHeight = SCREEN_HEIGHT;
        this.renderWidth = SCREEN_HEIGHT * imageRatio;
        this.renderX = (SCREEN_WIDTH - this.renderWidth) / 2;
        this.renderY = 0;
      }
    }
  }

  update() {
    // 不需要更新逻辑
  }

  /**
   * 背景图重绘函数
   * 绘制两张图片，两张图片大小和屏幕一致
   * 第一张漏出高度为 top 部分，其余的隐藏在屏幕上面
   * 第二张补全除了 top 高度之外的部分，其余的隐藏在屏幕下面
   */
  render(ctx) {
    // 使用计算后的尺寸和位置绘制背景
    ctx.drawImage(
      this.img,
      0,
      0,
      this.img.width,
      this.img.height,
      this.renderX || 0,
      this.renderY || 0,
      this.renderWidth || SCREEN_WIDTH,
      this.renderHeight || SCREEN_HEIGHT
    );
  }
}
